<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品表格</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        input[type="checkbox"] {
            margin: 0;
        }

        .center {
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>商品信息表</h2>

    <table>
        <thead>
            <tr>
                <th class="center"><input type="checkbox" id="selectAll"> 全选</th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="center"><input type="checkbox" class="itemCheckbox"></td>
                <td>商品1</td>
                <td>商家A</td>
                <td>￥100</td>
            </tr>
            <tr>
                <td class="center"><input type="checkbox" class="itemCheckbox"></td>
                <td>商品2</td>
                <td>商家B</td>
                <td>￥200</td>
            </tr>
            <tr>
                <td class="center"><input type="checkbox" class="itemCheckbox"></td>
                <td>商品3</td>
                <td>商家C</td>
                <td>￥300</td>
            </tr>
        </tbody>
    </table>

    <script>
        const selectCheckbox = document.getElementById('selectAll');

        // itemCheckboxes 是一个 伪数组
        const itemCheckboxes = document.querySelectorAll('.itemCheckbox');

        // 点击 全选 控制小按钮的选中状态 全选
        selectCheckbox.addEventListener('click', function () {
            Array.from(itemCheckboxes).forEach(item => item.checked = selectCheckbox.checked);
        })

        // 点击小按钮控制全选按钮的选中状态 反选
        itemCheckboxes.forEach(function (item, index, arr) {
            item.addEventListener('click', function () {
                // Array.from() 是 ES6 中的方法，用于将一个类数组对象（如 NodeList）转换为真正的数组。
                Array.from(arr).every(item => item.checked) ? selectCheckbox.checked = true : selectCheckbox.checked = false;
            })
        });
    </script>

</body>

</html>